<template>
  <div class="detail">
    <div class="detail-first">
      <div class="tag">
        <div class="select">
            <label-vue>封面&摘要：</label-vue>
        </div>
        <inputVue :name="cover" @select="select" ref="getVal1"></inputVue>
      </div>
      <div class="first">
        
        <div class="container">
          <div v-if="hasimg" class="img-container">
            <div class="img">
              <imgVue ref="getImg"></imgVue>
            </div>
            <div class="font">优质的封面有利于推荐</div>
          </div>
          <div class="digest-container">
            <digest-vue @extract="extract" :digest="digest.slice(0,256)" @changes="changes">
            </digest-vue>
          </div>
        </div>
      </div>
    </div>
    <div class="detail-second detail-all">
      <div class="tag">
        <label-vue> 文章标签：</label-vue>
      </div>
    </div>
    <div class="detail-thrid detail-all">
      <div class="tag">
        <label-vue> 分栏专栏：</label-vue>
      </div>
    </div>
    <div class="detail-fourth detail-all">
      <div class="tag">
        <div class="select">
            <label-vue>文章类型：</label-vue>
        </div>
        <inputVue :name="publishType" ref="getVal2"></inputVue>
      </div>
    </div>
  </div>
</template>
<script>
import buttonVue from '@/components/Editor/Common/Button';
import imgVue from '@/components/Editor/Common/Img';
import digestVue from '@/components/Editor/Extract/Digest';
import inputVue from '@/components/Editor/Common/Input';
import labelVue from '@/components/Editor/Common/Label';
export default {
  props:{
    digest:''
  },
  components: {
    buttonVue,
    imgVue,
    digestVue,
    inputVue,
    labelVue,
  },
  data() {
    return {
      cover: ['单图', '无封面'],
      publishType: ['全部可见', '仅我可见', '部分可见', '谁不可见'],
      hasimg:true,
    }
  },
  methods:{
    select(val){
      if (val==='无封面')
        this.hasimg=false;
      else if(val==='单图')
        this.hasimg=true;
    },
    extract(){
      this.$emit('extract')
    },
    getVals(){
      let val1 = this.$refs['getVal1'].getVal();
      let val2 = this.$refs['getVal2'].getVal();
      return [val1,val2];
    },
    getImg(){
      let img = this.$refs['getImg'].getImg();
      return img;
    },
    changes(val){
      this.$emit('changes',val)
    }
  }
}
</script>
<style scoped>
.detail {
  background-color: #fff;
  width: 816px;
  margin: 24px auto 0px;
  padding: 8px 64px 24px;
  border-radius: 4px;
  text-align: left;
}
.tag {
  display: flex;
}
.select{
  width: 80px;
}
.first {
  width: 598px;
  margin-left: 80px;
}

.container {
  display: flex;
  height: 110px;
}

.digest-container {
  width: 100%;
  height: 100%;
  padding-bottom: 20px;
  box-sizing: border-box;
}
.font {
  margin-top: 8px;
  font-size: 12px;
  color: #999aaa;
}

.img {
  width: 160px;
  height: 90px;
  margin-right: 24px;
}
.detail-all{
  margin-top: 20px;
}
</style>